<template>
  <div class="user-manual-select-selector-popup-user-selector">
    <div class="user-manual-select-selector-popup-user-selector-item"
         @click="() => selectUser(user)" v-for="user in users">
      <van-radio :shape="shape" :checked="isChecked(user)"/>
      <div class="user-manual-select-selector-popup-user-selector-item-username">
        {{ user.username }}
      </div>
    </div>
  </div>
</template>
<script setup>
import {createProps} from '@/utils';
import {computed} from 'vue';

defineOptions({name: 'UserManualSelectSelectorPopupUserSelector'});
const props = defineProps({
  users: createProps(Array),
  node: createProps(Object, () => ({
    nodeId: undefined,
    users: [],
    userManuSelectReason: undefined,
    nodeName: undefined,
    selectedUsers: [],
    multiple: false
  })),
});

function selectUser(user) {
  let selectedUsers = props?.node?.selectedUsers || [];
  props.node.selectedUsers = selectedUsers;

  let index = selectedUsers.findIndex(u => u.id === user.id);
  if (index !== -1) {
    // if(props.node.multiple) {
      selectedUsers.splice(index, 1);
    // }
  } else {
    if(props.node.multiple) {
      selectedUsers.push(user);
    } else {
      props.node.selectedUsers = [user];
    }
  }
}

function isChecked(user) {
  let selectedUsers = props.node.selectedUsers || [];
  props.node.selectedUsers = selectedUsers;

  let index = selectedUsers.findIndex(u => u.id === user.id);
  if (index !== -1) return true;
  return false;
}

const shape = computed(() => {
  if (props?.node?.multiple) {
    return 'square';
  }
  return 'round';
});
</script>
<style scoped lang="less">
.user-manual-select-selector-popup-user-selector {
  height: 100%;
  overflow: auto;
  background: #f4f4f4;
  padding-top: 0.5em;
}

.user-manual-select-selector-popup-user-selector .user-manual-select-selector-popup-user-selector-item {
  padding: 1em;
  border-bottom: 1px solid #f7f7f7;
  display: flex;
  background: white;
  align-items: center;
}

.user-manual-select-selector-popup-user-selector-item:active {
  background: #f4f4f4;
}

.user-manual-select-selector-popup-user-selector-item-username {
  font-weight: bolder;
  margin-left: 1em;
}

</style>